<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>%VITE_APP_TITLE%</title>

    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .loading,
      .loading>div {
        position: relative;
        box-sizing: border-box;
      }
  
      .loading {
        display: block;
        font-size: 0;
        color: #0d8ddd;
      }
  
      .loading.la-dark {
        color: #333;
      }
  
      .loading>div {
        display: inline-block;
        float: none;
        background-color: currentColor;
        border: 0 solid currentColor;
      }
  
      .loading {
        width: 120px;
        height: 72px;
      }
  
      .loading>div:nth-child(1) {
        position: absolute;
        bottom: 32%;
        left: 18%;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        transform-origin: center bottom;
        animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
      }
  
      .loading>div:not(:nth-child(1)) {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 2px;
        border-radius: 0;
        transform: translate(60%, 0);
        animation: ball-climbing-dot-steps 1.8s linear infinite;
      }
  
      .loading>div:not(:nth-child(1)):nth-child(2) {
        animation-delay: 0ms;
      }
  
      .loading>div:not(:nth-child(1)):nth-child(3) {
        animation-delay: -600ms;
      }
  
      .loading>div:not(:nth-child(1)):nth-child(4) {
        animation-delay: -1200ms;
      }
  
      @keyframes ball-climbing-dot-jump {
        0% {
          transform: scale(1, 0.7);
        }
  
        20% {
          transform: scale(0.7, 1.2);
        }
  
        40% {
          transform: scale(1, 1);
        }
  
        50% {
          bottom: 125%;
        }
  
        46% {
          transform: scale(1, 1);
        }
  
        80% {
          transform: scale(0.7, 1.2);
        }
  
        90% {
          transform: scale(0.7, 1.2);
        }
  
        100% {
          transform: scale(1, 0.7);
        }
      }
  
      @keyframes ball-climbing-dot-steps {
        0% {
          top: 0;
          right: 0;
          opacity: 0;
        }
  
        50% {
          opacity: 1;
        }
  
        100% {
          top: 100%;
          right: 100%;
          opacity: 0;
        }
      }
    </style>
        
</head>

<body>
    <div id="app">
      <div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;">
        <div class="loading">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
</body>

</html>